<template name="home">
	<view>
		<scroll-view>
			<view class="img-a">
				<view class="t-b" style="display: flex;justify-content: center;align-items: center;">
					{{location}}
				</view>
				<view @tap="goPage('/pages/userInfo/userInfo')">
					<view style="font-size: 30rpx; color: #fff9d7;margin-top: 30rpx;">
						<u-row customStyle="margin-bottom: 15px">
							<u-col span="1"></u-col>
							<u-col span="2">姓名</u-col>
							<u-col span="4">{{userInfo.driverName}}</u-col>
							<u-col span="2">手机号</u-col>
							<u-col span="4">{{hidePhoneCenter(userInfo.phoneNum)}}</u-col>
						</u-row>
						<u-row customStyle="margin-bottom: 5px">
							<u-col span="1"></u-col>
							<u-col span="2">身份证</u-col>
							<u-col span="6">{{hideCardCenter(userInfo.idCard)}}</u-col>
						</u-row>
					</view>
					<view class="t-b">
						<u-row customStyle="margin-bottom: 5px">
							<u-col span="6"></u-col>
							<u-col span="6">
								<a style="float:right;">修改个人信息 ></a>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			<!-- 常用服务 -->
			<view class=" login-view cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]">
				<view class="action">
					<text class='cuIcon-title text-blue'></text>常用服务
				</view>
			</view>
			<view class="cu-list grid col-3 text-sm">
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]"
					v-for="(item,index) in usList" :key="index" @tap="goPage(item.page)">
					<view class="padding text-center">
						<image :src="item.icon" style="width:100rpx;height:100rpx;">
							<view class="cu-tag badge margin-top-sm" style="margin-left:1.2em"
								v-if="getTtemDotInfo(item)">
								<block v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</block>
							</view>
						</image>
						<view class="margin-top-xs">{{item.title}}</view>
					</view>
				</view>
			</view>
			<!-- 其他服务 -->
			<view class="cu-bar bg-white solid-bottom margin-top" :style="[{animation: 'show 0.6s 1'}]">
				<view class="action">
					<text class='cuIcon-title text-yellow'></text>其他服务
				</view>
			</view>
			<view class="cu-list grid col-4 text-sm">
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]"
					v-for="(item,index) in osList" :key="index" @tap="goPage(item.page)">
					<view class="padding text-center">
						<image :src="item.icon" style="width:28px;height:28px;" />
						<view class="margin-top-xs">{{item.title}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="cu-tabbar-height margin-top"></view>
	</view>
</template>

<script>
	import {
		getAction
	} from '@/api/api.js';

	export default {
		data() {
			return {
				userInfo: {
					driverName: '',
					phoneNum: "", //手机号码
					idCard: '',
				},
				total:'',
				pageNo:1,
				carList: [],
				plateList: [],
				swiperList: [{
					id: 1,
					type: 'image',
					url: '../../static/sanjing1.png',
					link: ''
				}],
				usList: [{
						title: '入厂报备',
						icon: '../../static/icon/yuyue.png',
						page: '/pages/index/regisiter'
					},
					{
						title: '车辆信息',
						icon: '../../static/icon/yuyue.png',
						page: '/pages/carInfo/carList'
					}
				],
				osList: [{
					title: '退出登录',
					icon: '../../static/icon/exit.png',
					page: '/pages/home/login'
				}, ],
				msgCount: '',
				dot: {
					mailHome: false
				},
				getCarByOpenId: "/carRegister/carRegister/m/getCarByOpenId", //获取车辆信息
				getUserByOpenId: '/carRegister/carRegister/m/getUserByOpenId', //获取用户管理
				wxOpenId: 'oFTXH5jAW_5SyyvcXGPTkuosS4bw',
				location: '',
				leadingEnterprise: '0',
				fieldDisplay: {
					idCard: 1, //身份证号
					leadingEnterprise: 0, //引领性企业
					remarks: 0, //选择其他备注
					examinationButton: 0,
					freightVolume: 1,
					addCarButton: 0, //添加车辆按钮
					goods: 0,
					driversLicense: 0,
					firstIdentify: 0,
					contactPerson: 0,
					contactPhone: 0,
					producedTime: 0,
					contactCompany: 0,
					contactDept: 0,
					packagingOil: 0
				},
				fieldDisplayUrl: '/carRegister/carRegister/m/getFieldDisplay',
			}
		},
		onLoad() {
			uni.setStorageSync("openId", 'oFTXH5jAW_5SyyvcXGPTkuosS4bw')
			uni.setStorageSync("location", '英格瓷（天津）新材料技术有限公司')
			uni.setStorageSync("leadingEnterprise", 0)
			this.location=uni.getStorageSync("location")
			if (uni.getStorageSync("openId")) {
				this.wxOpenId = uni.getStorageSync("openId")
			} else {
				this.wxOpenId = 'oFTXH5jAW_5SyyvcXGPTkuosS4bw'
			}
			this.getFieldDisplay()
			
		},
		onShow() {
			this.getUser()
		},
		methods: {
			getFieldDisplay() {
				getAction(this.fieldDisplayUrl, {
					location: this.location
				}).then(res => {
					if (res.success) {
						for (let key in res.result) {
							if (res.result.hasOwnProperty(key) && this.fieldDisplay.hasOwnProperty(key)) {
								this.fieldDisplay[key] = res.result[key];
							}
						}
						uni.setStorageSync("fieldDisplay",this.fieldDisplay)
					} 
			
				})
			},
			getUser() {
				getAction(this.getUserByOpenId, {
					openId: this.wxOpenId
				}).then(res => {
					if (res.success && res.result) {
						this.userInfo = res.result
					}
				})
			},
			getTtemDotInfo(item) {
				if (item.page === 'annotationList' && this.msgCount > 0) {
					return this.msgCount
				}
				return '';
			},
			goPage(page) {
				uni.navigateTo({
					url: page
				})
			},
			hidePhoneCenter(tel) {
				var reg = /(\d{3})\d{4}(\d{4})/;
				var phone = tel.replace(reg, "$1****$2")
				return phone
			},
			hideCardCenter(data) {
				var card = data.replace(/^(.{4})(?:\d+)(.{4})$/, "$1******$2");
				return card
			},
		}
	}
</script>

<style>
	.t-b {
		text-align: left;
		font-size: 42rpx;
		color: #ffffff;
		padding: 50rpx 0 0 30rpx;
		font-weight: bold;
		line-height: 70rpx;
	}

	.t-t {
		text-align: left;
		color: #fff9d7;
		padding: 30rpx 0 0 10rpx;
		font-weight: bold;
		line-height: 70rpx;
		width: 70%;
	}

	.img-a {
		width: 100%;
		height: 500rpx;
		background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
		background-size: 100%;
	}

	.login-view {
		width: 100%;
		position: relative;
		margin-top: -120rpx;
		background-color: #ffffff;
		border-radius: 8% 8% 0% 0;
	}
</style>
